import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  Image,
  TextInput,
  Text,
  TouchableOpacity
} from 'react-native'
import NavigationBar from '../../components/common/NavigationBar'

class Username extends Component {
  constructor(props) {
    super(props)

    // 初始状态
    this.state = {
      username: ''
    }
  }
  render() {
    return (
      <View style = {styles.container}>
        <NavigationBar
          title={'修改昵称'}
          statusBar={{backgroundColor: '#ffffff', barStyle: 'dark-content'}}
          style={{borderBottomWidth: 1, borderColor: '#EDEDED', backgroundColor: '#ffffff'}}
          navigator={this.props.navigator}
        />
        <TextInput
          style={styles.userNameInput}
          onChangeText={(username) => this.setState({username})}
          value={this.state.username}
          underlineColorAndroid="transparent"
          placeholder="请输入新昵称"
          placeholderTextColor="#888888"
        />
        <Text style={styles.usernameDec}>4-16个字符，仅支持中文、英文大小写、数字及下划线</Text>
      </View>
    )
  }
}

export default Username

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1
  },
  userNameInput: {
    height: 48,
    borderColor: '#F1F1F1',
    borderWidth: 1,
    padding: 0,
    paddingLeft: 13,
    paddingRight: 13,
    marginLeft: 20,
    marginRight: 20,
    marginTop: 20,
    marginBottom: 10,
    borderRadius: 8,
    color: '#888888',
    fontSize: 14,
    backgroundColor: '#ffffff',
  },
  usernameDec: {
    fontSize: 12,
    color: '#666666',
    marginLeft: 33,
    marginRight: 33,
  },
})
